<template>
  <div class="videoDetail">
    <header-nav :isShow="true" />
    <play-video
      :videoUrl="videoUrl"
      :relationVideoLength="relationVideoLength"
      :currentPlayIndex="currentPlayIndex"
      @getPrevVideo="getPrevVideo"
      @getNextVideo="getNextVideo"
    />
    <video-info :videoDetail="videoDetail" />
    <relation-video
      :relationVideo="relationVideoData"
      :currentPlayIndex="currentPlayIndex"
      @toggleRelationVideo="toggleRelationVideo"
    />
    <share-friends />
  </div>
</template>

<script>
import HeaderNav from "@/components/common/HeaderNav.vue";
import PlayVideo from "@/components/video/PlayVideo.vue";
import VideoInfo from "@/components/video/VideoInfo.vue";
import RelationVideo from "@/components/video/RelationVideo.vue";
import ShareFriends from "@/components/video/ShareFriends.vue";
import { videoURL, relationVideo } from "@/network/api/video";

export default {
  name: "VideoDetailView",
  components: {
    HeaderNav,
    PlayVideo,
    RelationVideo,
    VideoInfo,
    ShareFriends,
  },
  data() {
    return {
      videoDetail: {},
      videoUrl: "",
      relationVideoData: [],
      relationVideoLength: 0,
      currentPlayIndex: 0,
    };
  },
  created() {
    this.videoDetail = JSON.parse(this.$route.query.item);
    this.getVideoURL(JSON.parse(this.$route.query.item).id);
    this.getRelationVideo(JSON.parse(this.$route.query.item).id);
  },
  methods: {
    getVideoURL(id) {
      videoURL("/mv/url", { id }).then((res) => {
        if (res.code === 200) {
          this.videoUrl = res.data.url;
        }
      });
    },
    getRelationVideo(id) {
      relationVideo("/related/allvideo", { id }).then((res) => {
        if (res.code === 200) {
          res.data.unshift(JSON.parse(this.$route.query.item));
          this.relationVideoData = res.data;
          this.relationVideoLength = res.data.length;
        }
      });
    },
    getPrevVideo(index) {
      if (index === 0) {
        this.getVideoURL(this.relationVideoData[index].id);
      }
      this.getNextVideo(index);
    },
    getNextVideo(index) {
      this.currentPlayIndex = index;
      console.log(this.currentPlayIndex);
      this.getVideoURL(this.relationVideoData[index].vid);
      this.videoDetail = this.relationVideoData[index];
    },
    toggleRelationVideo(index) {
      this.getNextVideo(index + 1);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>